import React, { Component } from "react";
import NewSearch from "components/template/department/components/new-search";
import ResizeTable from "components/resize-table/resize-table";
import ReactDOM from "react-dom";
import Space from "components/space";
import { Icon, Popover } from "antd";
import "styles/components/template/department-ui.scss";
import { EventUtils, messages } from "share/common";

class DepartmentUI extends Component {
  state = {
    toggle: false,
    expandedRowKeys: [],
  };

  deltaY = 0;

  handleScroll = (e) => {
    let { data, onScrollEvent } = this.props,
      CELL_HEIGHT = 41;
    e = EventUtils.getEvent(e);
    const { deltaY } = e.nativeEvent;
    if (this.deltaY <= 0 && deltaY <= 0) {
      this.deltaY = 0;
    } else if (this.deltaY >= data.length * CELL_HEIGHT && deltaY >= 0) {
      this.deltaY = data.length * CELL_HEIGHT;
      e.stopPropagation();
    } else {
      this.deltaY += deltaY;
    }
    if (deltaY <= 0) {
      //向上滚动
    } else {
      if (this.deltaY > data.length * CELL_HEIGHT - 408) {
        onScrollEvent && onScrollEvent();
      }
    }
  };

  clearScroll = () => {
    this.deltaY = 0;
    ReactDOM.findDOMNode(this.tabRef).scrollTo(0, 0);
  };

  componentDidMount() {
    const { onRef } = this.props;
    onRef && onRef(this);
  }

  searchParams = {};

  handleSearch = (target, values, init) => {
    const { service } = this.props;
    this.searchParams = target;
    service(target, init);
  };

  toggle = () => {
    this.setState({ toggle: !this.state.toggle });
  };

  closeTag = (item) => {
    const { rowSelection } = this.props;
    rowSelection.onSelect(item, false);
    rowSelection.onChange(rowSelection.selectedRowKeys.filter((id) => id !== item.id));
  };

  handleClickRow = (record) => {
    return record.children && record.children.length > 0
      ? {
          onClick: () => this.handleExpandedRowKeys(record),
        }
      : {};
  };

  handleExpandedRowKeys = (record) => {
    const { expandedRowKeys } = this.state;
    expandedRowKeys.toggle(record.id);
    this.setState({ expandedRowKeys });
  };

  render() {
    const { children, searchForm, columns, loading, rowSelection, data, total, showAllName } = this.props;
    const { toggle, expandedRowKeys } = this.state;
    return (
      <div className={"department-ui"}>
        <Space size={"middle"} direction={"vertical"}>
          <NewSearch
            searchForm={searchForm}
            onSearch={this.handleSearch}
            onRef={(searchRef) => (this.searchRef = searchRef)}
          />
          {children}
          <div onWheel={this.handleScroll} ref={(tabRef) => (this.tabRef = tabRef)}>
            <ResizeTable
              pagination={false}
              dataSource={data}
              columns={columns}
              scrollY={408}
              loading={loading}
              rowKey={"id"}
              bordered={false}
              expandedRowKeys={expandedRowKeys}
              onRow={this.handleClickRow}
              onExpand={(expanded, record) => this.handleExpandedRowKeys(record)}
              rowSelection={rowSelection}
            />
          </div>
        </Space>
        <div className={"department-ui-footer"}>
          {toggle && rowSelection.selectedRowKeys.length > 0 && (
            <div className={"department-ui-footer-tags"}>
              <div className={"department-ui-footer-tags-flex"}>
                {rowSelection.selectedData.map((item) => (
                  <div className={"department-ui-footer-tags-flex-item"}>
                    <span className={"department-ui-footer-tags-flex-item-show"}>
                      <Popover content={item[showAllName ? "path" : "name"]}>
                        {item[showAllName ? "path" : "name"]}
                      </Popover>
                    </span>
                    <Icon
                      type="close"
                      onClick={() => this.closeTag(item)}
                      className={"department-ui-footer-tags-flex-item-close"}
                    />
                  </div>
                ))}
              </div>
            </div>
          )}
          <div className={"department-ui-footer-operator"}>
            <Space style={{ float: "left" }}>
              <span
                dangerouslySetInnerHTML={{
                  __html: messages("common-1.key1472", {
                    arg1: rowSelection.selectedRowKeys.length,
                  }) /*已选<span class='total-color'>{arg1}</span>条*/,
                }}
              />
              {rowSelection.selectedRowKeys.length > 0 && (
                <a onClick={this.toggle}>
                  {toggle ? messages("common-1.key1473") /*收起已选*/ : messages("common-1.key1474") /*展开已选*/}
                  <Icon type={toggle ? "down" : "up"} />
                </a>
              )}
            </Space>
            {this.searchParams.name && (
              <span
                dangerouslySetInnerHTML={{
                  __html: messages("common-1.key1475", {
                    arg1: total,
                  }) /*共搜索到<span class='total-color'>{arg1}</span>条数据*/,
                }}
                style={{ float: "right" }}
              />
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default DepartmentUI;
